<template>
  <div class="body-wrapper">

    <!--    查询部分 -->
    <div class="search-box">
      <el-form :inline="true" class="demo-form-inline" size="mini">
        <el-form-item label="员工姓名">
          <el-input v-model="searchForm.adminName" placeholder="请输入员工姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="searchForm.cardCode" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-date-picker
            v-model="value2"
            size="mini"
            type="datetimerange"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            @change="chooseTime"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="left">
        </el-date-picker>

        <el-form-item style="margin-left: 10px">
          <el-button type="primary" @click="searchPage">查询</el-button>
          <el-button type="warning" @click="resetSearchForm">重置</el-button>
        </el-form-item>
      </el-form>

    </div>
    <!--    操作部分 -->
    <div class="exec-box">
      <el-button v-has-perm="['sys:admin:add']" size="mini" type="success" icon="el-icon-share" @click="editDialog=true,formData={adminGender: 0,
      isActive: true,adminAvatar:''}">新建
      </el-button>
      <el-button size="mini" type="warning" icon="el-icon-edit" @click="findById(ids[0]),editDialog=true"
                 v-has-perm="['sys:admin:update']"    :disabled="ids.length!=1">修改
      </el-button>
      <el-button v-has-perm="['sys:admin:delete']" size="mini" type="danger" icon="el-icon-delete" @click="doBatchDelete" :disabled="ids.length==0">删除
      </el-button>
    </div>

    <!--    列表部分 -->
    <el-scrollbar>
      <el-table
          :data="tableData"
          row-key="id"
          stripe
          ref="table"
          @selection-change="selectChange"
          style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="账户名称">
                <span>{{ props.row.accountName }}</span>
              </el-form-item>
              <el-form-item label="员工姓名">
                <span>{{ props.row.adminName }}</span>
              </el-form-item>
              <el-form-item label="员工邮箱">
                <span>{{ props.row.adminEmail }}</span>
              </el-form-item>
              <el-form-item label="员工手机">
                <span>{{ props.row.adminPhone }}</span>
              </el-form-item>
              <el-form-item label="员工薪资">
                <span>{{ props.row.adminSalary }}</span>
              </el-form-item>
              <el-form-item label="员工头像">
                <img :src="props.row.adminAvatar" width="35px" height="35px" style="vertical-align: middle">
              </el-form-item>

              <el-form-item label="身份证号">
                <span>{{ props.row.cardCode }}</span>
              </el-form-item>
              <el-form-item label="是够激活">

                <el-switch
                    v-model="props.row.isActive"
                    active-color="#13ce66"
                    inactive-color="#ff4949">

                </el-switch>
              </el-form-item>
              <el-form-item label="是否离职">
                <el-tag v-if="props.row.isEnable==0" type="success">在职</el-tag>
                <el-tag v-if="props.row.isEnable==1" type="danger">离职</el-tag>
              </el-form-item>

              <el-form-item label="员工性别">
                <el-tag v-if="props.row.adminGender==0" type="success">男</el-tag>
                <el-tag v-if="props.row.adminGender==1" type="warning">女</el-tag>
                <el-tag v-if="props.row.adminGender==2" type="danger">人妖</el-tag>
              </el-form-item>

              <el-form-item label="员工地址">
                <span>{{ props.row.adminAddress }}</span>
              </el-form-item>

            </el-form>
          </template>
        </el-table-column>


        <el-table-column
            type="selection"
            align="center"
            width="55">
        </el-table-column>
        <el-table-column
            prop="accountName"
            align="center"
            label="账户名称"
        >

        </el-table-column>

        <el-table-column
            prop="adminName"
            align="center"
            label="员工姓名"
        >

        </el-table-column>


        <el-table-column
            prop="adminSalary"
            align="center"
            label="员工薪资"
        >

        </el-table-column>

        <el-table-column
            prop="adminAvatar"
            align="center"
            label="员工头像"
        >

          <template slot-scope="obj">
            <img :src="obj.row.adminAvatar" width="35px" height="35px">
          </template>
        </el-table-column>

        <el-table-column
            prop="adminGender"
            align="center"
            label="员工性别"
        >
          <template v-slot="obj">
            <el-tag v-if="obj.row.adminGender==0" type="success">男</el-tag>
            <el-tag v-if="obj.row.adminGender==1" type="warning">女</el-tag>
            <el-tag v-if="obj.row.adminGender==2" type="danger">人妖</el-tag>
          </template>
        </el-table-column>

        <el-table-column
            align="center"
            label="是够激活"
        >
          <template v-slot="obj">
            <el-switch
                v-model="obj.row.isActive"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column
            label="操作"
            prop="address"
            width="180"
            align="center">
          <template v-slot="obj">
            <el-button size="mini" type="primary" icon="el-icon-edit" style="margin-right: 10px"
                       v-has-perm="['sys:admin:update']"     @click="findById(obj.row.id),editDialog=true"></el-button>


            <el-popconfirm
                v-has-perm="['sys:admin:delete']"
                confirm-button-text='好的'
                cancel-button-text='不用了'
                @confirm="batchDelete"
                @cancel="batchDeleteCancel"
                icon="el-icon-info"
                icon-color="red"
                title="这是一段内容确定删除吗？"
            >
              <el-button size="mini" type="danger" slot="reference" icon="el-icon-delete"
                         @click="itemBtnClick(obj.row)"></el-button>
            </el-popconfirm>


          </template>
        </el-table-column>
      </el-table>
      <!--    分页部分-->
      <div class="page-box">
        <el-pagination
            background
            :current-page="searchForm.currentPage"
            :page-size="searchForm.pageSize"
            @current-change="pageChangeHandler"
            layout="prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </el-scrollbar>

    <!--    弹框-->

    <el-dialog title="操作实体" :visible.sync="editDialog" width="37%">
      <!---->
      <el-form ref="form" :model="formData" :rules="formRules" label-width="80px" size="mini">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="账户名称" prop="accountName">
              <el-input v-model="formData.accountName"></el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="员工姓名" prop="adminName">
              <el-input v-model="formData.adminName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="员工邮箱" prop="adminEmail">
              <el-input v-model="formData.adminEmail"></el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="adminPhone">
              <el-input v-model="formData.adminPhone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="20">
          <el-col :span="12">

            <el-form-item label="身份证号" prop="cardCode">
              <el-input v-model="formData.cardCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工薪资" prop="adminSalary">
              <el-input-number v-model="formData.adminSalary" controls-position="right" :min="1500"
                               style="width: 100%"></el-input-number>
              <!--              <el-input v-model="formData.adminSalary">@change="handleChange"</el-input>-->
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="员工头像">
              <el-upload
                  class="avatar-uploader"
                  action=""
                  accept="image/*"
                  :show-file-list="false"
                  :http-request="getImgBaseStr"
              >
                <img v-if="formData.adminAvatar" :src="formData.adminAvatar" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分配角色">
              <el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
                <el-option
                    v-for="role in roleList"
                    :key="role.id"
                    :label="role.roleName"
                    :value="role.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="员工性别">
              <el-radio-group v-model="formData.adminGender">
                <el-radio :label="0">男</el-radio>
                <el-radio :label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是够激活">
              <el-switch
                  v-model="formData.isActive"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
              </el-switch>
            </el-form-item>

          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="员工地址" prop="adminAddress">
              <el-input type="textarea" v-model="formData.adminAddress"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false" size="mini">取 消</el-button>
        <el-button type="primary" size="mini" @click="addOrEdit">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script src="./index.js">
</script>

<style src="./index.scss" lang="scss">

</style>
